<template>
    <section class="homePage-recommend-house-box">
        <div class="container">
            <div class="content">
                <header class="clearfix public-header-bg">
                    <p>推荐房源</p>
                    <p>HOUSING</p>
                </header>
                <a-tabs defaultActiveKey="5" @change="tabsChange">
                    <a-tab-pane :tab="item.label" v-for="(item, index) in tabsItem" :key="item.city_stateId">
                        <a-row v-show="!noDataShow">
                            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="(list, index) in recommendHouseItem" :key="index" class="li">
                                <a-card :title="null" hoverable :loading="recommendHouseListLoading">
                                    <router-link :to="{path: 'EstateDetails', query: {EstateHouseId: list.id }}" target="_blank" class="top" :title="list.title" :alt="list.title">
                                        <img v-lazy="list.photo" :title="list.title" :alt="list.title">
                                        <p class="webkit-text-overflow-1lines">{{ isNull0(list.title) }}</p>
                                    </router-link>
                                    <div class="bottom">
                                        <header>
                                            <span class="investmentType">{{ isNull0(list.investmentType) }}</span>
                                            <em>|</em>
                                            <span>{{ isNull0(list.projectType) }}</span>
                                            <em>|</em>
                                            <span>{{ isSplit_houseType(list.houseType) }}</span>
                                        </header>
                                        <p class="webkit-text-overflow-1lines">{{ isNull0(list.tags) }}</p>
                                        <aside class="webkit-text-overflow-1lines">
                                            <span class="price">{{ isCurrencySymbol(list.countryName) }}<i>{{ isNull0(list.price) }}</i>万 {{ isNull0_RMB(list.price, '万', isCurrency(list.countryName)) }}</span>
                                            <em>|</em>
                                            <span class="area">{{ isNull0(list.minArea) }}m²起</span>
                                        </aside>
                                    </div>
                                </a-card>
                            </a-col>
                        </a-row>
                        <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>

                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                // 州城市tabs切换
                tabsItem: [
                    {
                        label: '加州',
                        city_stateId: '5'
                    },
                    {
                        label: '亚特兰大',
                        city_stateId: '8'
                    },
                    {
                        label: '西雅图',
                        city_stateId: '4'
                    },
                    {
                        label: '奥兰多',
                        city_stateId: '6'
                    },
                    {
                        label: '新泽西',
                        city_stateId: '7'
                    },
                    {
                        label: '休斯顿',
                        city_stateId: '11'
                    },
                    {
                        label: '泰国',
                        city_stateId: '2泰国'//国家id：美国1，泰国2，希腊3，日本9
                    },
                    {
                        label: '希腊',
                        city_stateId: '3希腊'//国家id：美国1，泰国2，希腊3，日本9
                    },
                    {
                        label: '日本',
                        city_stateId: '9日本'//国家id：美国1，泰国2，希腊3，日本9
                    },
                ],
                recommendHouseItem: [], //推荐房源数据
                recommendHouseListLoading: true,//列表加载loading
                noDataShow: false,//没有数据提示信息是否显示

            }
        },
        computed: {},
        created() {
        },
        mounted() {
            // 获取推荐房源数据，默认获取加州
            this.getRecommendHouseData(`/house/search/1/8?sid=5&field=sort&direction=asc&isRecommend=true&countryId=1`);
        },
        methods: {
            //州城市tabs切换
            tabsChange(key) {
                this.recommendHouseListLoading = true;

                let c_sId = '';
                //cityStateId请求参数：city_StateId=5为加州，!=5则为城市，
                key == 5 ? c_sId = 'sid' : c_sId = 'cid';

                if(key == '2泰国'){
                    this.getRecommendHouseData(`/house/search/1/8?field=sort&direction=asc&isRecommend=true&countryId=2`);
                }else if(key == '3希腊'){
                    this.getRecommendHouseData(`/house/search/1/8?field=sort&direction=asc&isRecommend=true&countryId=3`);
                }else if(key == '9日本'){
                    this.getRecommendHouseData(`/house/search/1/8?field=sort&direction=asc&isRecommend=true&countryId=9`);
                }else{
                    this.getRecommendHouseData(`/house/search/1/8?${c_sId}=${key}&field=sort&direction=asc&isRecommend=true&countryId=1`);
                }

            },
            // 获取推荐房源数据
            getRecommendHouseData(url) {
                this.$get(url).then(res => {
                    this.recommendHouseListLoading = false;
                    if (res.status == 0) {
                        this.recommendHouseItem = res.list;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                });
            },

        },
        components: {},
    }
</script>

<style lang="less" type="text/less">
    body {
        .homePage-recommend-house-box{
            padding: 40px 0;
            >.container{
                >.content{
                    .ant-row {
                        >.li{
                            margin: 15px 0;
                            padding: 0 10px;
                            .ant-card {
                                > .ant-card-body {
                                    padding: 0;
                                    .ant-card-loading-content{
                                        padding: 20px;
                                    }
                                    > .top {
                                        display: block;
                                        position: relative;
                                        cursor: pointer;
                                        overflow: hidden;
                                        > img {
                                            width: 100%;
                                            height: 185px;
                                            -webkit-transition: all linear 1s;
                                            -moz-transition: all linear 1s;
                                            transition: all linear 1s;
                                        }
                                        > p {
                                            width: 100%;
                                            position: absolute;
                                            bottom: 0;
                                            background: rgba(0, 0, 0, .4);
                                            font-size: 15px;
                                            color: #fff;
                                            padding: 0 0 0 15px;
                                        }
                                    }
                                    >.bottom {
                                        padding: 15px 10px;
                                        > header {
                                            > span {
                                                font-size: 16px;
                                                font-weight: bold;
                                            }
                                        }
                                        > p {
                                            font-size: 14px;
                                            color: #6b6b6b;
                                        }
                                        > aside {
                                            font-size: 14px;
                                            > span {
                                                font-weight: bold;
                                                font-family: "微软雅黑";
                                            }
                                            > span.price {
                                                > i {
                                                    font-size: 18px;
                                                    color: red;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        >.li:hover{
                            .ant-card {
                                > .ant-card-body {
                                    > a {
                                        > img {
                                            -webkit-transform: scale(1.1, 1.1);
                                            -moz-transform: scale(1.1, 1.1);
                                            transform: scale(1.1, 1.1);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
